import { memo } from "react";
import { Link } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { Dropdown, Space } from "antd";
import { Button } from "antd";
import { userLogout } from "../../store/module/settingSlice";
import { useNavigate } from "react-router-dom";
const Menu = memo(() => {
  let dispatch = useDispatch();
  const navigate = useNavigate();
  let logout = () => {
    // 触发用户退出操作
    dispatch(userLogout());
    // 跳转到登录页面
    navigate("/login");
  };
  const items = [
    {
      key: "2",
      label: (
        <div className="container">
          <Button
            size="large"
            color="primary"
            variant="outlined"
            className="pull-xs-right"
            onClick={logout}
          >
            退出登录
          </Button>
        </div>
      ),
    },
  ];
  let { currentUser } = useSelector((state) => state.login);
  if (currentUser) {
    return (
      <ul className="nav navbar-nav pull-xs-right">
        <li className="nav-item">
          <Link className="nav-link" to="/">
            主页
          </Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to="/article/new">
            写作
          </Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to="/setting">
            设置
          </Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to={`/profile/${currentUser.username}`}>
            个人中心
          </Link>
        </li>
        <li className="nav-item ">
          <Dropdown menu={{ items }} placement="bottom">
            <Space>
              <Link className="nav-link ">
                <img
                  src={
                    currentUser.avatar || "http://localhost:8000/default.png"
                  }
                  className="user-pic dropdown"
                  alt=""
                />
              </Link>
            </Space>
          </Dropdown>
        </li>
      </ul>
    );
  } else {
    return (
      <ul className="nav navbar-nav pull-xs-right">
        <li className="nav-item">
          <Link className="nav-link" to="/">
            主页
          </Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to="/login">
            登录
          </Link>
        </li>
        <li className="nav-item">
          <Link className="nav-link" to="/regist">
            注册
          </Link>
        </li>
      </ul>
    );
  }
});
export default Menu;
